<template>
  <div class="find">
    <!-- 头 -->
    <div class="header">
        <div class="item left">
            <router-link tag="a" to="/home" class="back" href="./1.html"><img src="../assets/imgs/返回箭头.png" alt=""></router-link>
        </div>
        <div class="item md">
            <input type="text" placeholder="高端长袖" v-model="keyword">
            <div class="what">
                <div class="wenzi">商品</div>
                <div class="jiantou">
                    <div class="imgs"><img src="../assets/imgs/下箭头.png" alt=""></div>
                </div>
                
            </div>
        </div>
        <div class="item right" @click="search()">
            <div class="doit">搜索</div>
        </div>
    </div>


    <div class="xxx" v-if="has=='one'">
        <!-- 最近搜索 -->
     <div class="timenext">
        <div class="intimenext">
            <div class="imgs">
            <img src="../assets/imgs/时钟.png" alt="">
        </div>
        <span>最近搜索</span>
        </div>
        <div class="delete" @click="dili">
            <img src="../assets/imgs/垃圾桶.png" alt="">
        </div>
    </div>
    <div class="something" v-if="saiqin">
        <div class="item" v-for="(item,index) in saiqin" :key="index">
            {{item}}
        </div>
    </div>
    <!-- 搜索发现 -->
    <div class="catch timenext">
        <div class="imgs">
            <img src="../assets/imgs/发现.png" alt="">
        </div>
        <span>热门发现</span>
    </div>
    <div class="something">
        <div class="item" v-for="(item,index) in hotlists" :key="index">
            {{item.name}}
        </div>
    </div>
    </div>


    <div>

        <div class="showsbox" v-if="has=='two'">
        <router-link tag="div" :to="'/show?id='+1" class="items" v-for="(item,index) in newlists" :key="index">
            <div class="imgs">
                <img :src="item.imgs" alt="">
            </div>
            <div class="xq">
                <p class="one">{{item.name}}</p>
                <p class="two">
                    <svg t="1667011311619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11169" width="200" height="200"><path d="M512.58254222 96.64739555c-180.00554667 0-326.22364445 146.21809778-326.22364444 326.22364445s146.21809778 326.22364445 326.22364444 326.22364445 326.22364445-146.21809778 326.22364445-326.22364445c-0.58254222-180.00554667-146.80064-326.22364445-326.22364445-326.22364445z m125.24657778 326.22364445c0 69.32252445-55.92405333 125.24657778-125.24657778 125.24657778s-125.24657778-55.92405333-125.24657777-125.24657778 55.92405333-125.24657778 125.24657777-125.24657778c68.73998222 0 125.24657778 55.92405333 125.24657778 125.24657778zM194.51448889 576.07964445l-123.49895111 153.20860444c-6.99050667 8.73813333-8.73813333 20.97152-4.66033778 32.03982222s14.56355555 18.05880889 26.2144 19.22389334l126.41166222 11.65084444 40.77795556 121.16878222c3.49525333 11.06830222 12.81592889 18.64135111 24.46677333 20.97152 1.74762667 0.58254222 3.49525333 0.58254222 5.24288 0.58254222 9.32067555 0 18.64135111-4.07779555 24.46677334-11.65084444L436.26951111 768.31857778c-106.02268445-23.88423111-195.15164445-95.53692445-241.75502222-192.23893333zM956.47971555 729.87079111l-125.24657777-155.53877333c-46.02083555 96.70200889-134.56725333 168.93724445-241.17248 192.82147555l122.91640889 155.53877334c5.82542222 7.57304889 15.14609778 11.65084445 24.46677333 11.65084444 1.74762667 0 3.49525333 0 5.24288-0.58254222 11.06830222-1.74762667 20.97152-9.90321778 24.46677333-20.97152l40.77795556-121.16878222 126.41166222-11.65084445c11.65084445-1.16508445 21.55406222-8.15559111 26.2144-19.22389333 4.66033778-9.90321778 2.91271111-22.13660445-4.07779556-30.87473778z" fill="#209c09" p-id="11170"></path></svg>
                    先用后付 <span>{{item.qijian}}</span>
                </p>
                <p class="three">￥{{item.price}}<span>已拼{{item.wan}}万+件</span></p>
            </div>
        </router-link>
        </div>

        <div class="nothing" v-if="has=='three'">
        <div class="tips">
            <svg t="1667009237368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9763" width="200" height="200"><path d="M42.666667 149.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h256a21.333333 21.333333 0 0 1 0 42.666667H64a21.333333 21.333333 0 0 1-21.333333-21.333334z m917.333333 746.666667h-128a21.333333 21.333333 0 0 0 0 42.666667h128a21.333333 21.333333 0 0 0 0-42.666667zM64 554.666667h256a21.333333 21.333333 0 0 0 0-42.666667H64a21.333333 21.333333 0 0 0 0 42.666667z m554.666667 341.333333H64a21.333333 21.333333 0 0 0 0 42.666667h554.666667a21.333333 21.333333 0 0 0 0-42.666667z m241.673333-432.16A212.406667 212.406667 0 0 1 725.333333 512c-117.82 0-213.333333-95.513333-213.333333-213.333333s95.513333-213.333333 213.333333-213.333334 213.333333 95.513333 213.333334 213.333334a212.406667 212.406667 0 0 1-48.16 135.006666l84.58 84.573334a21.333333 21.333333 0 0 1-30.173334 30.173333zM896 298.666667c0-94.253333-76.413333-170.666667-170.666667-170.666667S554.666667 204.413333 554.666667 298.666667s76.413333 170.666667 170.666666 170.666666 170.666667-76.413333 170.666667-170.666666z" fill="#707070" p-id="9764"></path></svg>
            <div class="wenzi">
                没有搜索到对应商品
            </div>
        </div>
        </div>

    </div>
  </div>
</template>

<script>
import { getapidata } from "../api/newsele";
export default {
    data(){
        return{
            saiqin:['长袖卫衣','骷髅头','2333'],
            hotlists:[
                {
                   name:"长袖卫衣" 
                },
                {
                   name:"骷髅头" 
                },
                {
                   name:"滑板鞋" 
                },
                {
                   name:"supreme" 
                },
                {
                   name:"长袖卫衣原宿风 "
                },
                {
                   name:"滑板鞋"
                },
                {
                   name:"飞马13"
                },
                {
                   name:"滑板鞋" 
                },
                {
                   name:"supreme" 
                },
                {
                   name:"长袖卫衣原宿风 "
                },
                {
                   name:"滑板鞋"
                },
                {
                   name:"飞马13"
                },
            ],
            keyword:'',
            keylists:"",
            newlists:[],
            has:'one',
        }
    },
    methods:{
        search(){
            // this.has='two'
            this.newlists = []//查找数据
            
            this.saiqin.push(this.keyword)
            // this.$router.push("/searshow")
            window.localStorage.setItem("word",JSON.stringify(this.saiqin));
            window.localStorage.setItem("keyword",this.keyword)

            console.log()


        this.keylists.forEach(item=>{//遍历数据
            if(item.name.indexOf(this.keyword) != -1){//如果关键字在数据里面有
                this.newlists.push(item)
                console.log(this.newlists)   
                this.has= 'two'
            }

            
            
        })
        if(this.newlists.length==0){
            this.has='three'
        }
        },
        dili(){
            this.saiqin=[];
        }
    },
    created(){
        getapidata().then(data=>{
            this.keylists = data.keylists
        })
        let word = JSON.parse(window.localStorage.getItem('word'))
        if (word!==null) {
            this.saiqin=word
        }else{
            this.saiqin=[]
        }
    }
}
</script>

<style lang="scss">
.find .showsbox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .items{
        width: 48%;
        margin: 0.5%;
        border: 1px solid #000;
        height: 236px;
        display: flex;
        flex-direction: column;

        .imgs{
            width: 96%;
            margin: 0 auto;
            height: 170px;
            overflow: hidden;
            img{
                width: 100%;
                display: block;
            }
        }
        .xq{
            width: 100%;
            height: 66px;
            box-sizing: border-box;
            padding: 5px 10px;
            display: flex;
            flex-direction: column;  
            .one{
                font-size: 12px;
                color: #000;
                overflow: hidden; 
                text-overflow: ellipsis;
                 white-space: nowrap;
                 width: 100%;
            }                
            .two{
                margin-top: 3px;
                font-size: 12px;
                color: #5ab047;
                span{
                    font-size: 12px;
                    color: red;
                    font-weight: 600;
                }
                svg{
                    width: 12px;
                    height: 12px;
                }
            }      
            .three{
                margin-top: 3px;
                font-size: 14px;
                color: red;
                span{
                    color: #9f9f9f;
                    font-size: 10px;
                }
            }
        }
    }
}

.find .nothing{
    display: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .tips{
        margin-top: 200px;
        display: flex;
        width: 140px;
        height: 100px;
        flex-direction: column;
        align-items: center;
        svg{
            width: 80px;
            height: 80px;
        }
        .wenzi{
            width: 140px;
            height: 20px;
            font-size: 14px;
            color: #8a8a8a;
            text-align: center;
        }
    }
}





        .timenext{
    display: flex;
justify-content: space-between;
    .delete{
        width: 20px;
        height: 20px;
        img{
            width: 100%;
        }
    }
        }
        .find .header{
            width: 93%;
            height: 66px;
            margin: 0 auto;
            /* background-color: red; */
            display: flex;
            align-items: center;
        }

        .find .left{
            width: 25px;
            height: 66px;
            display: flex;
            align-items: center;
        }
        .find .right{
            display: flex;
            align-items: center;
            margin-left: 14px;
        }
        .find .md{
            flex: 1;
            position: relative;
        }
        .find .what{
            position: absolute;
            display: flex;
            top: 9px;
            left: 8px;
            width: 47px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            font-size: 14px;
            border-right: 2px solid red;
        }
        .find .what .wenzi{
            width: 31px;
            height: 16px;
            font-size: 14px;
        }
        .find .what .jiantou{
            width: 14px;
            height: 16px;
            display: flex;
            align-items: flex-start;
        }
        .find .what .jiantou .imgs{
            width: 7px;
            height: 7px;
        }
        .find .what .jiantou .imgs img{
            width: 100%;
        }
        
        .find .md input{
            width: 100%;
            height: 34px;
            border-radius: 5px;
            outline: none;
            border: none;
            background-color: #ededed;
            text-indent: 60px;
            
        }
        
        .find .back{
            width: 20px;
            height: 20px;
            display: block;
        }
        .find .back img{
            width: 100%;
        }
        .find .doit{
            width: 28px;
            height: 20px;
            /* background-color: aqua; */
            font-size: 14px;
        }

        .find .timenext{
            width: 92%;
            margin: 0 auto;

        }
        .find .timenext .imgs{
            width: 16px;
            height: 16px;
            display: inline-block;
        }
        .find .timenext span{
            display: inline-block;
            height: 12px;
            font-size: 12px;
            margin-left: 8px;
        }
        .find .timenext .imgs img{
            width: 100%;
        }

        .find .catch{
            margin-top: 20px;
        }

        .find .something{
            width: 98%;
            flex-wrap: wrap;
            display: flex;
        }
        .find .something .item{
            margin-top: 5px;
            text-align: center;
            line-height: 18px;
            /* width: 70px; */
            height: 18px;
            border-radius: 9px;
            box-sizing: border-box;
            padding: 0 3px;
            background-color: #ededed;
            margin-left: 13px;
            font-size: 12px;
            color: rgb(65, 68, 71);
        }
</style>